<template>
  <div class="shppingCar_view">
    <h1 class="title">
      <div @click="$router.go(-1)" class="back">
        <van-image
          width="18"
          height="18"
          src="/img/login/left.png"
          alt="left"
        />
      </div>
      <span class="span">购物车</span>
      <div class="search_compile">
        <span @click="compile = !compile">{{ compile ? "完成" : "编辑" }}</span>
      </div>
    </h1>
    <!-- 展示区 -->
    <div class="exhibition">
      <!-- 没有商品提示  -->
      <div class="no_goods" v-if="!commodityExist">
        <div class="img_box">
          <img src="/img/shoppingCar/shoppingCar.png" alt="img" />
        </div>
        <p>您的购物车空空如也</p>
        <button @click="$router.push('/')">去逛逛</button>
      </div>
      <!-- 有商品展示 -->
      <div class="commodity_box" v-if="commodityExist">
        <ul class="business" v-for="(item, index) in list" :key="index">
          <li>
            <van-checkbox
              checked-color="#ff5777"
              v-model="item.allFlag"
              @click="businessAll(index)"
              >{{ item.shop }}</van-checkbox
            >
            <div class="item" v-for="(item_child, i) in item.goods" :key="i">
              <van-checkbox
                checked-color="#ff5777"
                v-model="item_child.flag"
                @click="businessOne(index)"
              ></van-checkbox>
              <van-image width="92" height="92" :src="item_child.image.image" />
              <div class="detail_box">
                <h6 class="detail_title">{{ item_child.title }}</h6>
                <p class="detail">
                  <span v-if="item_child.color"
                    >颜色：{{ item_child.color }}</span
                  >
                  <span v-if="item_child.size"
                    >尺码：{{ item_child.size }}</span
                  >
                  <img
                    class="detail_img"
                    src="/img/shoppingCar/subscript.png"
                    alt="img"
                  />
                </p>
                <span class="time">付款后最晚于7日内发货</span>
                <div class="select">
                  <p class="price">
                    <span class="price_span">¥</span>
                    {{ item_child.price.split("¥")[1] }}
                  </p>
                  <div class="stepper_box">
                    <!-- <div class="number">仅剩1件</div> -->
                    <van-stepper
                      v-model="item_child.num"
                      theme="round"
                      button-size="22"
                      disable-input
                      min="1"
                    />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 结算 清除区 -->
    <div class="close_box">
      <div class="close">
        <div class="all_box">
          <van-checkbox
            checked-color="#ff5777"
            v-model="allChecked"
            @click="all"
          ></van-checkbox>
          <span>全选&nbsp; ({{ commodityNum }})</span>
        </div>
        <div class="close_button_box">
          <p class="price" v-if="!compile">
            <span class="price_span">¥</span>
            {{ totalPrice }}
          </p>
          <button v-if="!compile" @click="submitPrompt">结算</button>
          <div class="move" v-if="compile">移入收藏夹</div>
          <button @click="deletePrompt" v-if="compile">删除</button>
        </div>
      </div>
    </div>
    <!-- 删除商品指示区 -->
    <van-overlay :show="delshow" @click="delshow = false" class="delCommodity">
      <div class="wrapper" @click.stop>
        <div class="block">
          <p>确定删除商品吗</p>
          <div class="button_box">
            <button @click="delshow = false">取消</button>
            <button @click="deleteCommodity">确认</button>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 结算商品指示区 -->
    <van-overlay
      :show="submitShow"
      @click="submitShow = false"
      class="delCommodity"
    >
      <div class="wrapper" @click.stop>
        <div class="block">
          <p>确定购买商品吗</p>
          <div class="button_box">
            <button @click="submitShow = false">取消</button>
            <button @click="submitOrder">确认</button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allChecked: false,
      value: 1,
      list: [],
      //编辑
      compile: false,
      //vant删除指示
      delshow: false,
      submitShow: false,
      //传递订单详情页数据
      orderDetail: [],
    };
  },

  mounted() {
    if (localStorage.getItem("shopCar")) {
      this.list = this.getLocalStroge("shopCar");
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.list = this.getLocalStroge("shopCar");
    next();
  },

  methods: {
    //点击单个商品不为选中店家全选就不为选中
    businessOne(index) {
      this.list[index].allFlag = this.list[index].goods.every(
        (item) => item.flag
      );
      this.allChecked = this.list.every((item) => item.allFlag);
      this.changeOrderDetail(index);
    },
    // 点击店家全选，让店家里的所有商品选中
    businessAll(index) {
      for (let i = 0; i < this.list[index].goods.length; i++) {
        this.list[index].goods[i].flag = this.list[index].allFlag;
      }
      this.allChecked = this.list.every((item) => item.allFlag);
      this.changeOrderDetail(index);
    },
    // 全选
    all() {
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].allFlag = this.allChecked;
        for (let j = 0; j < this.list[i].goods.length; j++) {
          this.list[i].goods[j].flag = this.allChecked;
        }
      }
      this.changeOrderDetail();
    },
    //筛选订单详情页数据
    changeOrderDetail(index) {
      for (let i = index; i < this.list.length; i++) {
        let flag = true;
        for (let j = 0; j < this.list[i].goods.length; j++) {
          //判断是否选中
          if (this.list[i].goods[j].flag) {
            // 是否是当前商店第一次进入
            if (flag) {
              let arr = this.list[i].goods.filter((item) => item.flag);
              arr.map((item) => {
                item.chooseDetailArr = { color: item.color, size: item.size };
              });
              let obj = {
                shop: this.list[i].shop,
                goods: arr,
              };
              if (this.orderDetail.length != 0) {
                for (let k = 0; k < this.orderDetail.length; k++) {
                  if (obj.shop == this.orderDetail[k].shop) {
                    this.orderDetail.splice(k, 1);
                    this.orderDetail.push(obj);
                    return;
                  } else if (k == this.orderDetail.length - 1) {
                    this.orderDetail.push(obj);
                    return;
                  }
                }
              } else {
                this.orderDetail.push(obj);
              }
            }
          }
        }
      }
    },
    //删除提示
    deletePrompt() {
      if (this.commodityNum == 0) {
        this.$toast("请先选择商品");
      } else {
        this.delshow = true;
      }
    },
    deleteCommodity() {
      for (let i = this.list.length - 1; i >= 0; i--) {
        for (let j = this.list[i].goods.length - 1; j >= 0; j--) {
          if (this.list[i].goods[j].flag) {
            this.list[i].goods = this.list[i].goods.filter(
              (item) => !item.flag
            );
            this.setLocalStroge("shopCar", this.list);
            this.delshow = false;
            if (this.list[i].goods.length == 0) {
              this.list.splice(i, 1);
              this.setLocalStroge("shopCar", this.list);
            }
            if (this.list.length == 0) {
              window.localStorage.removeItem("shopCar");
            }
          }
        }
      }
    },
    //结算提示
    submitPrompt() {
      if (this.commodityNum == 0) {
        this.$toast("请先选择商品");
      } else {
        this.submitShow = true;
      }
    },
    //结算
    submitOrder() {
      this.$router.push({
        name: "order-detail",
        query: { goodsArr: JSON.stringify(this.orderDetail) },
      });
    },
  },
  computed: {
    //总价格
    totalPrice() {
      let price = 0;
      if (this.list.length != 0) {
        for (let i = 0; i < this.list.length; i++) {
          for (let j = 0; j < this.list[i].goods.length; j++) {
            if (this.list[i].goods[j].flag) {
              price +=
                this.list[i].goods[j].price.split("¥")[1] *
                this.list[i].goods[j].num;
            }
          }
        }
      }
      return price;
    },
    //选择商品数量
    commodityNum() {
      let num = 0;
      if (this.list.length != 0) {
        for (let i = 0; i < this.list.length; i++) {
          for (let j = 0; j < this.list[i].goods.length; j++) {
            if (this.list[i].goods[j].flag) {
              num += 1;
            }
          }
        }
      }
      return num;
    },
    //监测购物车有没有商品
    commodityExist() {
      return this.list.length == 0 ? false : true;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.shppingCar_view {
  background-color: #efefef;
}
.title {
  position: relative;
  display: flex;
  font-weight: normal;
  font-size: 18px;
  color: #5e5e5e;
  align-items: center;
  border-bottom: 1px solid #c9c7c8;
  background-color: #fafafa;
  .back {
    width: 45px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    color: #7d6363;
  }
  .span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .search_compile {
    display: flex;
    align-items: center;
    position: absolute;
    right: 8px;
    span {
      font-size: 13px;
      color: #727272;
      display: inline-block;
      margin-right: 8px;
    }
  }
}
.exhibition {
  padding-bottom: 30px;
}
.no_goods {
  height: 258px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  overflow: hidden;
  padding-bottom: 20px;
  .img_box {
    position: relative;
    width: 100%;
    height: 210px;
    overflow: hidden;
    z-index: 1;
    img {
      position: absolute;
      width: 357px;
      height: 293px;
      left: 50%;
      transform: translateX(-50%);
      top: -37px;
      z-index: -1;
    }
  }
  p {
    font-size: 12px;
    color: #5e5e5e;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  button {
    width: 100px;
    height: 34px;
    border-radius: 5px;
    border: none;
    background-color: #ff5777;
    color: #fff;
    font-size: 15px;
  }
}
.business {
  margin: 9px;
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 3px;
  .item {
    display: flex;
    margin-top: 20px;
    .detail_box {
      width: 67.3%;
      margin-left: 9px;
    }
    .detail_title {
      font-size: 12px;
      color: #333;
      margin-bottom: 6px;
      font-weight: 700;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
    .detail {
      font-size: 12px;
      color: #ababab;
      padding-left: 6px;
      display: flex;
      align-items: center;
      background-color: #f7f7f7;
      margin-bottom: 6px;
    }
    .detail_img {
      width: 12px;
      height: 13px;
    }
    .time {
      display: inline-block;
      background-color: #ffe6e8;
      color: #ff5777;
      font-size: 12px;
      padding: 2px;
      margin-bottom: 6px;
    }
    .select {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 6px;
    }
    .price {
      display: flex;
      align-items: flex-end;
      font-size: 16px;
      color: #ff4466;
      font-weight: bold;
    }
    .price_span {
      font-weight: normal;
      font-size: 12px;
    }
    .stepper_box {
      display: flex;
      align-items: center;
    }
    .number {
      font-size: 12px;
      color: #ff5777;
      margin-right: 6px;
    }
  }
}
.close_box {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 999;
}
.close {
  padding: 10px 15px;
  border-top: 1px solid #d8d8d8;
  display: flex;
  justify-content: space-between;
  .all_box {
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      font-size: 14px;
      color: #5e5e5e;
      margin-left: 7px;
    }
  }
  .close_button_box {
    display: flex;
    align-items: center;
    .price {
      display: flex;
      align-items: flex-end;
      font-size: 16px;
      color: #ff4466;
      font-weight: bold;
    }
    .price_span {
      font-weight: normal;
      font-size: 12px;
    }
    button {
      width: 62px;
      height: 28px;
      border-radius: 12px;
      border: none;
      background-color: #ff5777;
      font-size: 16px;
      color: #fff;
      margin-left: 9px;
    }
    .move {
      width: 80px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      font-size: 16px;
      color: #ff5777;
      padding: 0 15px;
      border-radius: 12px;
      border: 1px solid #ff5777;
      background-color: #fff;
    }
  }
}
.delCommodity {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .block {
    width: 69.9%;
    height: 93px;
    background-color: #fff;
    border-radius: 3px;
    p {
      height: 53px;
      line-height: 53px;
      text-align: center;
      font-size: 14px;
      color: #666666;
    }
    .button_box {
      display: flex;
      border-top: 1px solid #cccccc;
    }
    button {
      height: 39px;
      flex: 1;
      font-size: 14px;
      color: #666666;
      border: none;
      background-color: #fff;
      &:nth-of-type(2) {
        border-left: 1px solid #cccccc;
        color: #ff5e7a;
      }
    }
  }
}

::v-deep .van-checkbox__label {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
::v-deep .van-checkbox__icon {
  margin-right: 10px;
}

::v-deep .van-image {
  z-index: 1;
}
</style>
